<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo测试</title>
</head>
<body>
    <h1 th:text="${content}"></h1>

    <a href="/excel/download">导出Excel</a>
    <br>
    <a href="/excel/downloadMultithreading">多线程导出Excel</a>
    <br>
    <a href="/excel/downloads">导出多sheel Excel</a>
    <br>
    <a href="/export/start/1">异步导出Excel</a>
    <br>
    <h3 th:text="${url}">文件下载展示地址</h3>
    <a href="/download/1">下载异步导出的excel</a>
    <br>

    <form action="/excel/upload" method="post" enctype="multipart/form-data">
        <div>
            <input type="file" multiple="multiple" accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" name="file">
        </div>
        <div style="margin-top:10px;">
            <input type="submit" value="导入Excel">
        </div>
    </form>

    <br>
    <br>
    <br>

    <div class="upload">
        <img src="/qq.jpeg" alt="" style="width: 200px;height:200px;background:red;">
        <button>点击上传</button>
        <input type="file" style="display:none" class="fileDoms" onchange="changeFile()"/>
    </div>
    </body>
    <script>
        let btn  = document.querySelector(".upload button")
        let img = document.querySelector(".upload img")
        const fileInputs = document.querySelector('.fileDoms')
        btn.onclick = btnclick
        function btnclick(){
            fileInputs.click()
        }
        function changeFile(){
            console.log("上传")
            let reader = new FileReader();
            reader.readAsDataURL(fileInputs.files[0]);
            reader.onload = function(a){
                img.src = a.target.result; //等同于reader.result
                console.log(a,reader,reader.result);
            }
        }
    </script>
</body>
</html>
